<template>
  <div>
    <div class="headers">
      <div class="buttons">
        <el-button type="success" icon="Search" plain>搜索</el-button>
        <el-button icon="Download">导出当前页面筛查记录</el-button>
        <el-button type="danger" icon="Delete">一键删除</el-button>
      </div>
      <div class="tips">仅统计已在本院做过TST检测的学校</div>
    </div>

    <div class="tables">
      <el-table
        :data="tableData"
        style="width: 100%"
        :header-cell-style="headerCellStyle"
        border
      >
      <el-table-column type="selection"/>
        <el-table-column label="学号" align="center" prop="id" />
        <el-table-column label="现居地" align="center" prop="depId" />
        <el-table-column
          label="线上问诊结果"
          align="center"
          prop="checkpersonId"
        />
        <el-table-column
          label="线上问诊时间"
          align="center"
          prop="createdTime"
        />
        <el-table-column
          label="TST（IGRA）结果"
          align="center"
          prop="updatedTime"
        />
        <el-table-column label="TST（IGRA）机构" align="center" prop="id" />
        <el-table-column
          label="TST（IGRA）检测时间"
          align="center"
          prop="depId"
        />
        <el-table-column
          label="胸片检查结果"
          align="center"
          prop="createdTime"
        />
        <el-table-column
          label="胸片检查机构"
          align="center"
          prop="updatedTime"
        />
        <el-table-column label="胸片检查时间" align="center" prop="" />
        <el-table-column label="活动性肺结核（疑似）" align="center" prop="" />
        <el-table-column label="诊断机构" align="center" prop="" />
        <el-table-column label="诊断时间" align="center" prop="" />
        <el-table-column label="预防性治疗" align="center" prop="id" />
        <el-table-column label="预防性治疗方案" align="center" prop="" />
        <el-table-column label="微信名" align="center" prop="" />
        <el-table-column label="家长（大学生）" align="center" prop="date" />
        <el-table-column label="电话" align="center" prop="" />
      </el-table>
    </div>
  </div>
</template>

<script setup name="screeningrecord">
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: '123456',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]

//颜色填充
const headerCellStyle = ({ column }) => {
  if (column.label === '学号' || column.label === '现居地') {
    // 颜色可以改 背景颜色不能改 是因为若依框架将本项目的表头样式改了，我们加一个!important就可以覆盖他改的样式
    return {
      background: '#fce4d3!important', // 红色背景
      color: '#929499', // 文字样式可以改，是因为若依并没有覆盖
    }
  } else if (
    column.label === '线上问诊结果' ||
    column.label === '线上问诊时间'
  ) {
    return {
      background: '#fff3ca!important',
      color: '#929499',
    }
  } else if (
    column.label === 'TST(IGRA)结果' ||
    column.label === 'TST(IGRA)机构' ||
    column.label === 'TST(IGRA)检测时间'
  ) {
    return {
      background: '#e3f2d9!important',
      color: '#929499',
    }
  } else if (
    column.label === '微信名' ||
    column.label === '家长（大学生）' ||
    column.label === '电话'
  ) {
    return {
      background: '#fadade!important',
      color: '#929499',
    }
  } else {
    return {
      background: '#d2f4f2!important',
      color: '#929499',
    }
  }
}
</script>

<style scoped>
.headers {
  display: flex;
  justify-content: space-between;
  padding: 20px;
}

.buttons {
  margin-right: 20px;
}

.tables {
  padding: 20px;
}

.tips {
  padding: 7px;
  font-size: 12px;
  font-weight: 600;
  color: #eaab5a;
  line-height: 35px;
  background-color: #fdf6ec;
}
</style>
